<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公司组织架构树</title>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <style>
    * {padding: 0; margin: 0; font: inherit; box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-overflow-scrolling: touch;
      -webkit-text-size-adjust: 100%;
    }
    html, body {height: 100%;}
    #app {height: 100%; overflow: hidden;}
    #app canvas {width: 100%; height: 100%; vertical-align: top;}
    #app canvas:focus {background: #f3fbff;}
  </style>
</head>
<body>
  
<div id="app">
  <canvas id="canvas" tabindex="1"></canvas>
</div>

<script src="../lib/app-aux.js"></script>
<script type="module">
import BrainGraphControl from '../lib/lib-brain-graph-control.js'

const data = `
董事长
 总经理
  副总经理
 人力资源部经理
  人事专员
   安保部经理
    安保员
     后勤部经理
      后勤专员
       清洁工
    食堂管理员
    厨师
     文秘部经理
      文秘专员
      行政助理
     法务部经理
      法务专员
  财务部经理
   会计
  出纳
   市场部经理
    市场策划
  市场调研员
   产品部经理
    产品策划
    产品研发员
   技术部经理
    技术支持
     客服专员
      售后服务部经理
      售后服务专员
       前台接待员
        行政部经理
        行政专员
        司机
    技术研发员
 生产部经理
  生产计划员
   生产质检员
  采购部经理
   采购员
    物流部经理
    物流配送员
    仓储部经理
     仓库管理员
     销售部经理
      区域经理
     销售代表
      客户服务部经理
 合规员
`.split('\n').filter(v => v.trim()).map((name_, idx, arr) => {
  const id = idx + 1
  const name = name_.trim()
  return {
    id,
    pid: 0,
    name,
    depth: name_.length - name.length
  }
})

for (let i = data.length - 1; i > -1; i--) {
  for (let j = i - 1; j > -1; j--) {
    if (data[j].depth < data[i].depth) {
      data[i].pid = data[j].id
      break
    }
  }
}

const timeKey = `test ${data.length / 1e4}万节点 执行耗时`
console.time(timeKey)
const brainGraph = window.brainGraph = new BrainGraphControl({
  canvas: document.getElementById('canvas'),
  data,
})
console.timeEnd(timeKey)

const d = window.d = brainGraph.d

brainGraph.pathHighlight(d.mapId[31])
</script>

</body>
</html>